import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

const RedBull = ()=> {
    return (<div>RedBull</div>);
}

const RedBull2 = ()=> {
    return (<div>RedBull2</div>);
}

const Sprite = ()=> {
    return (<div>Sprite</div>);
}

const Drink = ({routes})=> {
    return <div>
        <h2>Drink</h2>
        <li><Link to="/drink/redbull">ReadBull-></Link></li>
        <li><Link to="/drink/sprite">Sprite-></Link></li>
        {
            routes.map(function (route, index) {
                return <RouteConfigWithSubRoutes key={index} {...route}/>
            })
        }
    </div>
}

const RouteConfigWithSubRoutes = function (route) {
    // console.log(route);
    return <Route path={route.path}
                  render={(props)=> {
                        // console.log(props);
                        return <route.component {...props} routes={route.routes}/>
                    }
                  }/>
};

const Config = [
    {
        path: '/drink',
        component: Drink,
        routes: [
            {
                path: '/drink/redbull',
                component: RedBull,
                routes: [
                    {
                        path: '/drink/redbull2',
                        component: RedBull2
                    }]
            },
            {
                path: '/drink/sprite',
                component: Sprite
            }
        ]
    }
];

const App = ()=> {
    return <Router>
        <div>
            <li><Link to="/drink">Drink</Link></li>
            {Config.map(function (route, index) {
                return <RouteConfigWithSubRoutes key={index} {...route}/>
            })}
        </div>
    </Router>
}

export default App;






